<template>
  <div class="staff-location">
    <div class="header">
      <h1 class="page-title">接单员位置信息</h1>
      <p class="page-subtitle">查看和管理接单员的实时位置信息</p>
    </div>
    
    <div class="content">
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="接单员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入接单员姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <el-card class="table-card">
        <el-table :data="filteredStaffData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="id" label="地址ID" width="100"></el-table-column>
          <el-table-column prop="empId" label="员工ID" width="100"></el-table-column>
          <el-table-column prop="address" label="当前位置">
            <template #default="scope">
              <span>{{ scope.row.address || '未知位置' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="longitude" label="经度" width="120"></el-table-column>
          <el-table-column prop="latitude" label="纬度" width="120"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" type="primary" @click="viewLocation(scope.row)">查看地图</el-button>
            </template>
          </el-table-column>
        </el-table>
        
      </el-card>
    </div>
    
    <!-- 地图查看对话框 -->
    <el-dialog v-model="mapDialogVisible" title="位置详情" width="600px">
      <div class="map-container">
        <div class="map-placeholder">
          <p>地图显示区域</p>
          <p>员工ID：{{ currentStaff.empId }}</p>
          <p>位置：{{ currentStaff.address }}</p>
          <p>经纬度：{{ currentStaff.longitude }}, {{ currentStaff.latitude }}</p>
          <p>更新时间：{{ currentStaff.updateTime }}</p>
        </div>
      </div>
      <template #footer>
        <el-button @click="mapDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeLocationAPI } from '@/apis/employee.js'

export default {
  name: 'StaffLocation',
  data() {
    return {
      loading: false,
      searchForm: {
        name: '',
        phone: ''
      },
      staffData: [], // 兼容性保留
      allStaffData: [], // 存储所有数据
      mapDialogVisible: false,
      currentStaff: {}
    }
  },
  computed: {
    filteredStaffData() {
      return this.allStaffData.filter(item => {
        // 简单的前端过滤逻辑
        const matchesName = !this.searchForm.name || 
          (item.empId && item.empId.includes(this.searchForm.name));
        const matchesPhone = !this.searchForm.phone || 
          (item.empId && item.empId.includes(this.searchForm.phone));
        return matchesName && matchesPhone;
      });
    }
  },
  mounted() {
    this.fetchStaffData()
  },
  methods: {
    async fetchStaffData() {
      this.loading = true
      try {
        const params = {
          ...this.searchForm
        }
        
        const res = await getEmployeeLocationAPI(params)
        if (res.code === 0) {
          this.allStaffData = res.data
        } else {
          this.$message.error(res.msg || '获取数据失败')
        }
      } catch (error) {
        this.$message.error('获取数据时发生错误: ' + error.message)
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.fetchStaffData()
    },
    handleReset() {
      this.searchForm = {
        name: '',
        phone: ''
      }
      this.fetchStaffData()
    },
    viewLocation(staff) {
      this.currentStaff = staff
      this.mapDialogVisible = true
    }
  }
}
</script>

<style scoped>
.staff-location {
  padding: 20px;
  text-align: center;
}

.page-title {
  font-size: 2.2rem;
  color: #2c3e50;
  margin: 20px 0;
  text-align: center;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin-bottom: 30px;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.content {
  text-align: left;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.map-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  text-align: center;
  color: #999;
}

.map-placeholder p {
  margin: 10px 0;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style>